[iOS][Android] 画面を 4 分割するビューを作成する

田中圭介

2016.06.17

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

画面を 4 分割させます

なんで？って聞かれると答えに困るのですが、なんとなく思いついたのでやってみます。

iOS

iOS は意外と簡単です。
Autolayout がいい感じにやってくれます。

まず、4 つのビューをこのように配置します。

split_view_1

続いてそれぞれのビューに制約をつけていきます。
Constant は全て 0 です。

ビュー A

Leading Space
- Superview に対して
Top Space
- Superview に対して
Tailing Space
- ビュー B に対して
Bottom Space
- ビュー C に対して

ビュー B

Top Space
- Superview に対して
Tailing Space
- Superview に対して
Bottom Space
- ビュー D に対して

ビュー C

Leading Space
- Superview に対して
Tailing Space
- ビュー D に対して
Bottom Space
- Superview に対して

ビュー D

Tailing Space
- Superview に対して
Bottom Space
- Superview に対して

ビュー A, B, C, D

Equal Widths
Equal Heights

これで完成です。
簡単ですね。

Portrait

Landscape

Android

こちらは少々手間がかかります。
同じようなビューは RelativeLayout を利用することで実現できます。

サンプルコード

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <Space
        android:id="@+id/vertical_separator"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        />

    <Space
        android:id="@+id/horizontal_separator"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_centerVertical="true"
        />

    <!-- View A -->
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignBottom="@id/horizontal_separator"
        android:layout_alignEnd="@id/vertical_separator"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:background="#ff0000"
        />

    <!-- View B -->
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignBottom="@id/horizontal_separator"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:layout_alignStart="@id/vertical_separator"
        android:background="#00ff00"
        />

    <!-- View C -->
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignEnd="@id/vertical_separator"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_alignTop="@id/horizontal_separator"
        android:background="#0000ff"
        />

    <!-- View D -->
    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignStart="@id/vertical_separator"
        android:layout_alignTop="@id/horizontal_separator"
        android:background="#000000"
        />

</RelativeLayout>

この作りのキモは横方向中央と縦方向中央に配置した、目に見えない セパレータ です。
これらを配置することによって、それぞれのビューの開始位置や終了位置をセパレータに合わせることができます。

split_view_4